import { FC, useState, useEffect, useMemo, useCallback } from 'react';
import { Badge, DatePicker, Input, Space, Tag } from 'antd';
import { isArray, isNil } from 'lodash';

import RbProTable, { RbProTableStore } from '@components/RbProTable';
import { Content } from '@components/Page';

import { getDictionaryListApi } from '@services/service';
import { Status, MethodType, MethodTypeColor } from '@enumTypes/enumTypes';
import { TableAlignType } from '@enumTypes/table';
import { getPropValueByValue } from '@utils/util';
import { generateCommonSelect, tableColumnEllipsisRender } from '@/utils/renderer';

interface SysLogSettingProps {}

const { RangePicker } = DatePicker;

const store = new RbProTableStore();

const SysLogSetting: FC<SysLogSettingProps> = () => {
  const [methodTypeList, setMethodTypeList] = useState<any[]>([]);
  const [logLevelList, setLogLevelList] = useState<any[]>([]);

  /** 查询设置字典数据 */
  const handleQueryDictionaryList = useCallback(() => {
    getDictionaryListApi(['RB_REQUEST_METHOD', 'RB_LOG_LEVEL']).then((res: any) => {
      if (isArray(res)) {
        const [methodTypeList = [], logLevelList = []] = res || [];
        setMethodTypeList(methodTypeList);
        setLogLevelList(logLevelList);
      }
    });
  }, []);

  useEffect(() => {
    handleQueryDictionaryList();
  }, [handleQueryDictionaryList]);

  /** 查询条配置列表 */
  const queryFromItems = useMemo(
    () => [
      {
        name: 'operator',
        label: '操作人',
        children: <Input />
      },
      {
        name: 'operatorTimeRange',
        label: '操作时间',
        children: <RangePicker />
      },
      {
        name: 'level',
        label: '日志级别',
        children: generateCommonSelect(logLevelList)
      },
      {
        name: 'uri',
        label: '访问的资源',
        children: <Input />
      }
    ],
    [logLevelList]
  );

  /** 表格列配置 */
  const columns = useMemo(
    () => [
      {
        title: '日志信息',
        dataIndex: 'msg',
        ellipsis: true,
        width: 160
      },
      {
        title: '日志级别',
        dataIndex: 'level',
        align: TableAlignType.center,
        width: 80,
        render: (value: any) => {
          return (
            !isNil(value) && (
              <Space>
                <Badge status={Status.enable === value ? 'success' : 'error'} />
                {value === 1 ? '成功' : value === 2 ? '异常' : ''}
              </Space>
            )
          );
        }
      },
      {
        title: '操作人',
        dataIndex: 'operator',
        align: TableAlignType.center,
        ...tableColumnEllipsisRender(),
        width: 150
      },
      {
        title: '操作时间',
        dataIndex: 'operatorTime',
        align: TableAlignType.center,
        width: 190
      },
      {
        title: '操作系统',
        dataIndex: 'os',
        align: TableAlignType.center,
        width: 80
      },
      {
        title: '客户端类型',
        dataIndex: 'browser',
        align: TableAlignType.center,
        width: 100
      },
      {
        title: '请求ip',
        dataIndex: 'ip',
        align: TableAlignType.center,
        width: 120
      },
      {
        title: '访问类型',
        dataIndex: 'methodType',
        align: TableAlignType.center,
        width: 100,
        render: (value: unknown) => {
          return (
            !isNil(value) && (
              <Tag
                color={
                  MethodTypeColor[
                    MethodType[
                      value as keyof typeof MethodType
                    ] as unknown as keyof typeof MethodTypeColor
                  ]
                }
              >
                {getPropValueByValue(value as string, methodTypeList)}
              </Tag>
            )
          );
        }
      },
      {
        title: '请求地址',
        dataIndex: 'uri',
        align: TableAlignType.center,
        width: 120
      },
      {
        title: '请求参数',
        dataIndex: 'params',
        ...tableColumnEllipsisRender(),
        width: 300
      },
      {
        title: '响应参数',
        dataIndex: 'response',
        ...tableColumnEllipsisRender(),
        width: 300
      }
    ],
    [methodTypeList]
  );

  return (
    <Content>
      <RbProTable
        rowKey="id"
        columns={columns}
        store={store}
        actionUrl="/system/log"
        queryConfig={{
          queryFromItems,
          queryFormat: true
        }}
        sticky // 表头随页面滚动固定
        selectionType={false}
        expandable={{
          fixed: 'right',
          showExpandColumn: true,
          // expandedRowRender: record => record.errorStack,
          expandedRowRender: record => (
            <div
              dangerouslySetInnerHTML={{
                __html: record.errorStack
              }}
            />
          ),
          rowExpandable: record => record.errorStack !== null
        }}
      />
    </Content>
  );
};

export default SysLogSetting;
